<template>
  <section>
    <div @click="goBack">返回</div>
    <p>URL 是：{{ url }}</p>
    <p>路径是：{{ url.pathname }}</p>
    <img width="100" src="/images/test1.png" />
    <div @click="toPage('/page1')">访问page1</div>
    <div @click="toBaidu()">百度</div>
  </section>
</template>

<script lang="ts" setup>
const route = useRoute()
const router = useRouter()
const count = useCounter() // 与useState('counter')相同
const url = useRequestURL() // 返回一个在服务器端和客户端都可使用的 URL 对象。
console.log("@@about@@", url, route)

init()
async function init() {
  try {
    // 使用一个与SSR兼容的可组合函数从API端点获取数据
    const res = await useFetch(`/server/testpost`, {
      headers: {
        Authorization: 'token123'
      },
      method: 'post',
      params: { id: route.query.id } // post请求入参
      // query: { test: 123 } // get请求入参
    })
    console.log("about result", res)
  } catch (err) {
    console.error("@@testpost error@@", err)
  }
}
function goBack() {
  router.back()
}

function toPage(path: string) {
  navigateTo({
    path,
    replace: true,
    query: {
      sort: 'asc'
    }
  })
}
 
function toBaidu() { 
  navigateTo('https://www.baidu.com/', {
    external: true, // 当设置为true时，允许导航到外部URL
    open: {
      target: '_blank'
    }
  })
}
</script>